import React from 'react';
import QRCode from 'qrcode.react';
import * as LOGIN_API from "../../../portal4theme/apis/login";
import {getDefaultPathname, setLSValue} from "../../../portal4theme/util/loginUtil";
import {WeaTools} from "ecCom";
const { ua } = WeaTools;
class E8QRCode extends React.Component {
    constructor(props) {
        super(props)
    }

    state = {
        qrcodetimes:0
    }

    componentDidMount() {
        const {cacheAccount:loginId, langId} = this.props.state.data;
        this.props.getLoginForm({loginId, langId});

        this.getQRCode();
    }

    componentDidUpdate() {
        this.getQRCode();
    }

    componentWillUnmount() {
        window.clearInterval(this.scanInterval);
    }

    componentWillUnmount() {
        window.clearInterval(this.scanInterval);
    }

    render() {
        const {labelObj,data} = this.props.state;
        const {qrcode} = data




        return (
            <div>
                <div style={{'margin-left':'auto','margin-right':'auto','text-align':'center',height:'165px',width:'280px',}}>
                    <div style={{width:'125px',height:'125px','background-color':'#ffffff','text-align':'center','vertical-align':'middle',display:'inline-block'}}>
                                <div style={{display:'inline-block','vertical-align':'middle'}}>{!!qrcode ? <QRCode value={qrcode.text} size={100} fgColor="#404549" bgColor="#eaeaea"/> : ''}</div>
                                <div style={{display:'inline-block','vertical-align':'middle',height:'125px'}}></div>

                    </div>
                    <div style={{height:'165px','vertical-align':'middle',display:'inline-block'}}></div>

                </div>
                <div style={{'margin-left':'auto','margin-right':'auto','text-align':'center',height:'20px','margin-bottom':'10px',width:'280px'}}>
                         <div  style={{color:'#D5E7E4'}}>{this.props.labelObj().qrcode}</div>
                </div>
            </div>
        );
    }

    getQRCode= ()=> {
        const {qrcode} = this.props.state.data;

        if (qrcode) {
            window.clearInterval(this.scanInterval);
            this.scanInterval = window.setInterval(this.scanQRCode.bind(this), 1000);
        }
    }



    scanQRCode =()=> {
        const {langId, langText, qrcode} = this.props.state.data;
        const qrcodetimes = this.state.qrcodetimes
        // 统计二维码扫描时间
        if (qrcodetimes> 30) {
            this.setState({qrcodetimes:0}) ;
            this.props.setStateAndCache('loginType', 'form')
        } else {
            this.setState({qrcodetimes:qrcodetimes+1})

            LOGIN_API.login4qc({
                langid: langId,
                loginkey: qrcode.loginkey,
                isie: !!ua.browser === "IE"
            }).then((result) => {
                if (jQuery.trim(result) != '0' && jQuery.trim(result) != '9' && jQuery.trim(result) != '-99') {
                    jQuery.setSessionTimeZone && jQuery.setSessionTimeZone();

                    setLSValue('login', 'langId', langId);
                    setLSValue('login', 'langText', langText);
                    WeaTools.ls.set('languageidweaver', langId);

                    weaHistory.push({pathname: getDefaultPathname()});
                }
            });
        }
    }
}

export default E8QRCode;